<template>
  <div class="shop-container">
    <!-- 顶部导航栏 -->
    <nav class="shop-nav">
      <div class="nav-left">
        <button class="nav-btn">浏览</button>
        <button class="nav-btn active">推荐</button>
        <button class="nav-btn">类别</button>
        <button class="nav-btn">硬件</button>
        <button class="nav-btn">畅玩方式</button>
        <button class="nav-btn">特别栏目</button>
      </div>
      <div class="nav-right">
        <div class="search-bar">
          <input type="text" placeholder="搜索商店">
          <button class="search-btn">🔍</button>
        </div>
        <button class="wishlist-btn" @click="toggleWishlist">
          ⭐ 愿望单
          <span v-if="store.wishlist.length > 0" class="item-count">{{ store.wishlist.length }}</span>
        </button>
        <button class="cart-btn" @click="toggleCart">
          🛒 购物车
          <span v-if="store.cart.length > 0" class="item-count">{{ store.cart.length }}</span>
        </button>
      </div>
    </nav>

    <!-- 主内容区域 -->
    <main class="shop-main">
      <!-- 左侧推荐内容 -->
      <div class="right-recommendations">
        <div class="rec-section">
          <h3>新品队列</h3>
          <!-- 新品内容 -->
        </div>
        <div class="rec-section">
          <h3>社区推荐</h3>
          <!-- 社区推荐内容 -->
        </div>
        <div class="rec-section">
          <h3>交互式推荐模型</h3>
          <!-- 交互式推荐内容 -->
        </div>
        <div class="rec-section">
          <h3>好友中热门</h3>
          <!-- 好友中热门内容 -->
        </div>
        <div class="rec-section">
          <h3>为您推荐的DLC</h3>
          <!-- DLC推荐内容 -->
        </div>
      </div>

      <!-- 中间探索队列 -->
      <div class="discovery-queue">
          <div class="discovery-queue-content">
            <h2>您的探索队列</h2>
            <p>让小白盒量身为您推荐一组游戏</p>
            <button class="browse-queue-btn">浏览我的队列 →</button>
          </div>
          <div class="game-covers-bg"></div>
        </div>

      <!-- 右侧游戏推荐 -->
      <div class="game-recommendations">
        <h2>为您推荐</h2>
        <div class="game-list">
          <!-- 热门网络游戏 -->
          <div class="game-card">
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/730/capsule_sm_120.jpg" alt="Counter-Strike 2">
            <div class="game-info">
              <h3>Counter-Strike 2</h3>
              <p class="game-price">免费</p>
            </div>
          </div>
          <div class="game-card">
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/1091500/capsule_sm_120.jpg" alt="Cyberpunk 2077">
            <div class="game-info">
              <h3>赛博朋克 2077</h3>
              <p class="game-price">¥198.00</p>
            </div>
          </div>
          <div class="game-card">
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/1245620/capsule_sm_120.jpg" alt="Elden Ring">
            <div class="game-info">
              <h3>艾尔登法环</h3>
              <p class="game-price">¥298.00</p>
            </div>
          </div>
          <div class="game-card">
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/1086940/capsule_sm_120.jpg" alt="Baldur's Gate 3">
            <div class="game-info">
              <h3>博德之门3</h3>
              <p class="game-price">¥298.00</p>
            </div>
          </div>
          <div class="game-card">
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/1716740/capsule_sm_120.jpg" alt="Starfield">
            <div class="game-info">
              <h3>星空</h3>
              <p class="game-price">¥298.00</p>
            </div>
          </div>
          <div class="game-card">
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/2220330/capsule_sm_120.jpg" alt="Cyberpunk 2077: Phantom Liberty">
            <div class="game-info">
              <h3>赛博朋克 2077：自由幻局</h3>
              <p class="game-price">¥158.00</p>
            </div>
          </div>
          <div class="game-card">
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/1426210/capsule_sm_120.jpg" alt="It Takes Two">
            <div class="game-info">
              <h3>双人成行</h3>
              <p class="game-price">¥198.00</p>
            </div>
          </div>
          <div class="game-card">
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/1172470/capsule_sm_120.jpg" alt="Apex Legends">
            <div class="game-info">
              <h3>Apex英雄</h3>
              <p class="game-price">免费</p>
            </div>
          </div>
          <div class="game-card">
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/570/capsule_sm_120.jpg" alt="Dota 2">
            <div class="game-info">
              <h3>Dota 2</h3>
              <p class="game-price">免费</p>
            </div>
          </div>
          <div class="game-card">
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/578080/capsule_sm_120.jpg" alt="PUBG: BATTLEGROUNDS">
            <div class="game-info">
              <h3>绝地求生</h3>
              <p class="game-price">¥98.00</p>
            </div>
          </div>
          <div class="game-card">
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/1938090/capsule_sm_120.jpg" alt="Call of Duty®: Warzone™ 2.0">
            <div class="game-info">
              <h3>使命召唤：战区 2.0</h3>
              <p class="game-price">免费</p>
            </div>
          </div>
          <div class="game-card">
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/1222670/capsule_sm_120.jpg" alt="The Sims™ 4">
            <div class="game-info">
              <h3>模拟人生 4</h3>
              <p class="game-price">¥198.00</p>
            </div>
          </div>
          <div class="game-card">
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/739630/capsule_sm_120.jpg" alt="Phasmophobia">
            <div class="game-info">
              <h3>恐鬼症</h3>
              <p class="game-price">¥70.00</p>
            </div>
          </div>
          <div class="game-card">
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/252490/capsule_sm_120.jpg" alt="Rust">
            <div class="game-info">
              <h3>Rust</h3>
              <p class="game-price">¥168.00</p>
            </div>
          </div>
          <div class="game-card">
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/1142710/capsule_sm_120.jpg" alt="Valorant">
            <div class="game-info">
              <h3>无畏契约</h3>
              <p class="game-price">免费</p>
            </div>
          </div>
          <div class="game-card">
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/1306100/capsule_sm_120.jpg" alt="Cyber Hunter">
            <div class="game-info">
              <h3>量子特攻</h3>
              <p class="game-price">免费</p>
            </div>
          </div>
          <div class="game-card">
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/782330/capsule_sm_120.jpg" alt="DOOM Eternal">
            <div class="game-info">
              <h3>毁灭战士：永恒</h3>
              <p class="game-price">¥199.00</p>
            </div>
          </div>
          <div class="game-card">
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/1238840/capsule_sm_120.jpg" alt="Battlefield™ V">
            <div class="game-info">
              <h3>战地 5</h3>
              <p class="game-price">¥198.00</p>
            </div>
          </div>
          <div class="game-card">
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/359550/capsule_sm_120.jpg" alt="Tom Clancy's Rainbow Six® Siege">
            <div class="game-info">
              <h3>彩虹六号：围攻</h3>
              <p class="game-price">¥168.00</p>
            </div>
          </div>
          <div class="game-card">
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/271590/capsule_sm_120.jpg" alt="Grand Theft Auto V">
            <div class="game-info">
              <h3>Grand Theft Auto V</h3>
              <p class="game-price">¥119.00</p>
            </div>
          </div>
          <div class="game-card">
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/1551360/capsule_sm_120.jpg" alt="Forza Horizon 5">
            <div class="game-info">
              <h3>极限竞速：地平线 5</h3>
              <p class="game-price">¥298.00</p>
            </div>
          </div>
          <div class="game-card">
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/1599340/capsule_sm_120.jpg" alt="Lost Ark">
            <div class="game-info">
              <h3>失落的方舟</h3>
              <p class="game-price">免费</p>
            </div>
          </div>
          <div class="game-card">
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/377160/capsule_sm_120.jpg" alt="Fallout 4">
            <div class="game-info">
              <h3>辐射 4</h3>
              <p class="game-price">¥99.00</p>
            </div>
          </div>
          <div class="game-card">
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/413150/capsule_sm_120.jpg" alt="Stardew Valley">
            <div class="game-info">
              <h3>星露谷物语</h3>
              <p class="game-price">¥48.00</p>
            </div>
          </div>
          <div class="game-card">
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/1817070/capsule_sm_120.jpg" alt="FIFA 23">
            <div class="game-info">
              <h3>FIFA 23</h3>
              <p class="game-price">¥248.00</p>
            </div>
          </div>
          <div class="game-card">
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/1506830/capsule_sm_120.jpg" alt="Phantasy Star Online 2 New Genesis">
            <div class="game-info">
              <h3>梦幻之星在线2：新起源</h3>
              <p class="game-price">免费</p>
            </div>
          </div>
          <div class="game-card">
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/1296610/capsule_sm_120.jpg" alt="Enshrouded">
            <div class="game-info">
              <h3>迷雾求生</h3>
              <p class="game-price">¥148.00</p>
            </div>
          </div>
          <div class="game-card">
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/107410/capsule_sm_120.jpg" alt="Arma 3">
            <div class="game-info">
              <h3>武装突袭 3</h3>
              <p class="game-price">¥149.00</p>
            </div>
          </div>
          <div class="game-card">
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/2189350/capsule_sm_120.jpg" alt="F1® 23">
            <div class="game-info">
              <h3>F1® 23</h3>
              <p class="game-price">¥248.00</p>
            </div>
          </div>
          <div class="game-card">
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/1638420/capsule_sm_120.jpg" alt="Life is Strange: True Colors">
            <div class="game-info">
              <h3>奇异人生：本色</h3>
              <p class="game-price">¥198.00</p>
            </div>
          </div>
          <div class="game-card">
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/346110/capsule_sm_120.jpg" alt="ARK: Survival Evolved">
            <div class="game-info">
              <h3>方舟：生存进化</h3>
              <p class="game-price">¥138.00</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>

  <!-- 购物车面板 -->
  <div v-if="showCart" class="cart-panel">
    <div class="panel-header">
      <h3>购物车</h3>
      <button class="close-panel" @click="toggleCart">×</button>
    </div>
    <div class="panel-content">
      <div v-if="store.cart.length === 0" class="empty-message">
        <p>购物车为空</p>
      </div>
      <div v-else class="cart-items">
        <div v-for="game in store.cart" :key="game.id" class="cart-item">
          <img :src="game.images[0]" :alt="game.name" class="cart-item-image">
          <div class="cart-item-info">
            <h4>{{ game.name }}</h4>
            <p class="cart-item-price">{{ game.price }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 愿望单面板 -->
  <div v-if="showWishlist" class="wishlist-panel">
    <div class="panel-header">
      <h3>愿望单</h3>
      <button class="close-panel" @click="toggleWishlist">×</button>
    </div>
    <div class="panel-content">
      <div v-if="store.wishlist.length === 0" class="empty-message">
        <p>愿望单为空</p>
      </div>
      <div v-else class="wishlist-items">
        <div v-for="game in store.wishlist" :key="game.id" class="wishlist-item">
          <img :src="game.images[0]" :alt="game.name" class="wishlist-item-image">
          <div class="wishlist-item-info">
            <h4>{{ game.name }}</h4>
            <p class="wishlist-item-price">{{ game.price }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { store } from '../store.js'

export default {
  name: 'ShopView',
  setup() {
    // 控制购物车和愿望单面板的显示
    const showCart = ref(false)
    const showWishlist = ref(false)
    
    // 切换购物车显示
    const toggleCart = () => {
      showCart.value = !showCart.value
      showWishlist.value = false
    }
    
    // 切换愿望单显示
    const toggleWishlist = () => {
      showWishlist.value = !showWishlist.value
      showCart.value = false
    }
    
    return {
      store,
      showCart,
      showWishlist,
      toggleCart,
      toggleWishlist
    }
  }
}
</script>

<style scoped>
.shop-container {
  min-height: 100vh;
  background-color: #121212;
  color: #ffffff;
}

/* 数量显示样式 */
.item-count {
  background-color: #ff4757;
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 12px;
  margin-left: 5px;
}

/* 购物车和愿望单面板样式 */
.cart-panel,
.wishlist-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  height: 100vh;
  background: rgba(18, 18, 18, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.panel-header {
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-header h3 {
  margin: 0;
  font-size: 20px;
}

.close-panel {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.empty-message {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #cccccc;
}

.cart-items,
.wishlist-items {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.cart-item,
.wishlist-item {
  display: flex;
  gap: 15px;
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 5px;
}

.cart-item-image,
.wishlist-item-image {
  width: 80px;
  height: 45px;
  object-fit: cover;
  border-radius: 3px;
}

.cart-item-info,
.wishlist-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cart-item-info h4,
.wishlist-item-info h4 {
  margin: 0;
  font-size: 14px;
}

.cart-item-price,
.wishlist-item-price {
  margin: 0;
  font-size: 14px;
  color: #a8ff78;
}

.shop-nav {
  background: rgba(18, 18, 18, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 15px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-left {
  display: flex;
  gap: 10px;
}

.nav-btn {
  background: transparent;
  color: #cccccc;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.nav-btn:hover {
  color: #ffffff;
}

.nav-btn.active {
  color: #ffffff;
  border-bottom: 2px solid #ff4757;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.search-bar {
  display: flex;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.search-bar input {
  background: transparent;
  border: none;
  color: #ffffff;
  padding: 8px 12px;
  width: 200px;
  outline: none;
}

.search-bar input::placeholder {
  color: #999999;
}

.search-btn {
  background: #ff4757;
  border: none;
  color: #ffffff;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.wishlist-btn, .cart-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #ffffff;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.3s ease;
}

.wishlist-btn:hover, .cart-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.shop-main {
  padding: 30px;
  display: grid;
  grid-template-columns: 250px 300px 1fr;
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
}

.game-recommendations h2,
.discovery-queue h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #ffffff;
}

.game-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.game-card {
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.game-card:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.game-card img {
  width: 120px;
  height: 67px;
  object-fit: cover;
}

.game-info {
  flex: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.game-info h3 {
  font-size: 16px;
  margin: 0;
  color: #ffffff;
}

.game-price {
  font-size: 14px;
  color: #a8ff78;
  margin: 0;
}

.discovery-queue {
  position: relative;
  padding: 0;
  border-radius: 5px;
  overflow: hidden;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.game-covers-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://cdn.cloudflare.steamstatic.com/steam/apps/1091500/header.jpg');
  background-size: cover;
    background-repeat: no-repeat;
  opacity: 0.6;
}

.discovery-queue-content {
  position: relative;
  padding: 30px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.4) 80%, transparent);
  backdrop-filter: blur(5px);
}

.discovery-queue p {
  color: #cccccc;
  margin: 0;
}

.browse-queue-btn {
  background: #ff4757;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.3s ease;
  margin-top: 10px;
}

.browse-queue-btn:hover {
  background: #c21327;
}

.right-recommendations {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rec-section {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 5px;
}

.rec-section h3 {
  font-size: 16px;
  margin: 0 0 15px 0;
  color: #ffffff;
}
</style>